
<template>
  <div id="app" class="pr">
    <h3 class="title">{{ msg }}</h3>
    <div class="amap-wrapper">
      <el-amap vid="amapDemo" :zoom="zoom" :center="center" class="amap-demo">
        <el-amap-marker v-for="marker in markers" :position="marker.position" :events="marker.events" :visible="marker.visible" :draggable="marker.draggable"></el-amap-marker>
        <el-amap-info-window v-if="isShowWindow" v-for="window in windows" :position="window.position" :content="window.content" :visible="window.visible" :events="window.events"></el-amap-info-window>
      </el-amap>
    </div>
    <div class="information-wrapper" :class="{'information-wrapper-close' : isClosed}">
      <div class="info-box pr">
        <div class="info-head clearfix">
          <h2 class="fl">旅程推荐</h2>
          <Button v-if="isClosed" type="success" shape="circle" icon="arrow-right-b" size="small" class="fr" @click="isClosed = !isClosed"></Button>
          <Button v-if="!isClosed" type="success" shape="circle" icon="arrow-left-b" size="small" class="fr"></Button>
        </div>
        <div class="info-content">
          <el-amap-search-box class="search-box" :search-option="searchOption" :on-search-result="onSearchResult"></el-amap-search-box>
          <Tabs type="card" style="clearfix">
            <TabPane label="酒店">
              <div class="list-warp">
                <div class="hotel-list">
                  <hotel-item v-for="hotel in hotels" v-on:refreshbizlines="addMarker" :hotel="hotel"></hotel-item>
                </div>
              </div>
              <div>
                <div class="fr">
                  <Page :total="hotels.length" size="small" show-total ></Page>
                </div>
              </div>
            </TabPane>
            <TabPane label="航班">
              <div class="list-warp">
                <div class="flight-list">
                  <flight v-for="flight in flights" :flight="flight"></flight>
                </div>
                <div class="fr">
                  <Page :total="flights.length" size="small" show-total ></Page>
                </div>
              </div>
            </TabPane>
            <TabPane label="保险">
              <div class="list-warp">
                <div class="flight-list">
                  <insurance  :insurance="insurance"></insurance>
                </div>
                <div class="fr">
                  <Page :total="1" size="small" show-total ></Page>
                </div>
              </div>
            </TabPane>
            <TabPane label="美食">
              <div class="list-warp">
                <div class="flight-list">
                  <food-item v-for="food in foods" :food="food"></food-item>
                </div>
                <div class="fr">
                  <Page :total="foods.length" size="small" show-total ></Page>
                </div>
              </div>
            </TabPane>
          </Tabs>
        </div>
        <div class="info-footer clearfix">

        </div>
      </div>
    </div>
    <div class="toplist-wrapper" :class="{'toplist-wrapper-open' : !isClosed}">
      <div class="toplist-box clearfix pr">
        <div class="toplist-head clearfix">
          <h2 class="fl"> 参与本次活动预定酒店排行</h2>
          <div class="fr">
          </div>
        </div>
        <div class="toplist-content">
          <top-item v-for="topItem in topItems" :topItem="topItem"></top-item>
        </div>
      </div>
    </div>
    <div class="gather-wrapper">
      <div class="gather">
        <router-link to="/stone/stone_create">
          <span>我要召集</span>
        </router-link>
      </div>
    </div>
  </div>
</template>
<script>
  import HotelItem from './HotelItem'
  import Flight from './Flight'
  import TopItem from './TopItem'
  import Insurance from './Insurance'
  import FoodItem from './FoodItem'
  export default {
    components: {
      HotelItem,
      Flight,
      TopItem,
      Insurance,
      FoodItem
    },
    props: ['isShowWindow'],
    data () {
      return {
        isClosed: true,
        topOpened: true,
        zoom: 14,
        center: [116.410362, 39.881479],
        searchOption: {
          city: '',
          citylimit: true
        },
        markers: [
          {
            position: [116.410362, 39.881479],
            events: {
              click: () => {
                alert('click marker')
              },
              dragend: (e) => {
                this.markers[0].position = [e.lnglat.lng, e.lnglat.lat]
              }
            },
            visible: true,
            draggable: false
          }
        ],
        windows: [
          {
            position: [116.410362, 39.881479],
            content: '我的集合石',
            visible: true,
            events: {
              close () {
                console.log('close infowindow')
              }
            }
          }
        ],
        hotels: [],
        flights: [],
        insurance: '',
        topItems: [
          {
            url: '//7xv4kr.com1.z0.glb.clouddn.com/suhao-02.png',
            hotelName: '【测试】内部酒店资源测试',
            checkInRate: 75,
            star: 5
          },
          {
            url: '//7xv4kr.com1.z0.glb.clouddn.com/suhao-03.png',
            hotelName: '内部测试专用修改',
            checkInRate: 50,
            star: 4.5
          },
          {
            url: '//7xv4kr.com1.z0.glb.clouddn.com/suhao-04.png',
            hotelName: '两大分销商对接测试酒店(请勿修改)',
            checkInRate: 25,
            star: 4
          }
        ],
        foods: [
          {
            name: '全聚德'
          },
          {
            name: '东来顺'
          }
        ]
      }
    },
    created () {
      this.fetchData()
    },
    methods: {
      fetchData () {
        this.handleInitFlightData()
        this.handleInitHotelData()
        this.handleInitInsuranceData()
      },
      onSearchResult (pois) {
        this.markers = []
        let latSum = 0
        let lngSum = 0
        if (pois.length > 0) {
          pois.forEach(poi => {
            let {lng, lat} = poi
            lngSum += lng
            latSum += lat
            let marker = {
              position: [poi.lng, poi.lat]
            }
            this.markers.push(marker)
          })
          let center = {
            lng: lngSum / pois.length,
            lat: latSum / pois.length
          }
          this.center = [center.lng, center.lat]
        }
      },
      handleInitHotelData () {
        this.$http.get('/api/hotel/list?PageIndex=1&PageSize=10').then(response => {
          if (response.data.success !== true) {
            this.$Message.error(response.data.msg)
          } else {
            this.hotels = JSON.parse(response.data.obj).result.ResInfoList
          }
        })
      },
      handleInitFlightData () {
        this.$http.get('/api/flight/list').then(response => {
          if (response.data.success !== true) {
            this.$Message.error(response.data.msg)
          } else {
            this.flights = response.data.obj.resp.goto.flightInfomationList
          }
        })
      },
      handleInitInsuranceData () {
        this.$http.get('/api/aic/fee').then(response => {
          if (response.data.success !== true) {
            this.$Message.error(response.data.msg)
          } else {
            this.insurance = JSON.parse(response.data.obj)
          }
        })
      }
    }
  }
</script>

<style>
  .amap-wrapper {
    width: 100%;
    height: 600px;
  }

  .information-wrapper-close {
    transform: translateX(-320px);
  }
  .information-wrapper {
    height: 600px;
    width: 350px;
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 999;
    transition: all 0.2s ease-in-out 0s;
  }

  .information-wrapper .info-box {
    border:1px solid #ccc;
    background: #fff;
    border-radius: 5px;
    box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.3);
  }

  .information-wrapper .info-box .info-head {
    background: #379E66;
    color: #fff;
    padding: 5px 15px 5px 20px;
    border-radius: 5px 5px 0 0;
    border-bottom: 1px solid #ccc;
  }

  .information-wrapper .info-box .info-head button {

  }

  .information-wrapper .info-box .info-content {
    background: #fff;
    height:500px;
    margin: 15px 0 0 0;
  }
  .information-wrapper .info-box .info-content .el-vue-search-box-container {
    width: 330px;
    margin: 10px 10px;
    border: 1px solid #ccc;
  }
  .information-wrapper .info-box .info-content .list-warp {
    overflow: hidden;
  }
  .information-wrapper .info-box .info-content .hotel-list, .information-wrapper .info-box .info-content .flight-list {
    height:360px;
    overflow-y: auto;
    width: 365px;
  }

  .information-wrapper .info-box .info-footer {
    margin-top: 5px;
    padding: 10px;
  }



  .toplist-wrapper {
    width: 600px;
    height:200px;
    position: absolute;
    top: 20px;
    left: -610px;
    z-index: 998;
    transition: all 1.5s ease-in-out 0s;
  }

  .toplist-wrapper .toplist-box {
    background: #f8f8f9;
    width: 100%;
    height: 100%;
    border: 1px solid #ccc;
    box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.3);
    border-radius: 5px 5px 0 0;
  }

  .toplist-wrapper .toplist-box .toplist-head {
    background: #80848f;
    border-radius: 5px 5px 0 0;
    color: #fff;
    padding: 5px 15px;
  }

  .toplist-wrapper-close {
    transform: translateX(-500px);
  }

  .toplist-wrapper-open {
    transform: translateX(1000px);
  }

  .gather-wrapper {
    width: 150px;
    height: 100px;
    position: absolute;
    top: 25px;
    right: 15px;
  }
  .gather {
  }

  .gather a {
    padding: 5px 10px;
    background:#80848f;
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    border-radius: 5px;
  }

  .gather a:hover {
    background: #FF0000;
  }
</style>
